<template>
    <div class="newmission">
        <div class="con">
            <div class="title">最新消息<img src="../../assets/home/msg.png"></div>
            <ul>
                <li v-for="item in result">
                    <p>{{ item.content }}</p>
                    <P class="detail clearfix">
                        <span>{{ item.name }}</span>
                        <span>{{ item.description }}</span>
                        <span>{{ item.expireTime }}</span>
                    </P>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                result: []
            };
        },
        created() {
            this.$http
            .get(
                this.h + '/employees/' + localStorage.getItem('ID') + '/messages',
                {
                    headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                }
            )
            .then((res) => {
                this.result = res.data.data;
            })
            .catch((err) => {
                console.log(err);
            })
        }
    };

</script>

<style lang="scss" scoped>
    .newmission {
        width: 49%;
        float: left;
        margin-left: 2%;
        margin-top: 20px;
        .con {
            width: 100%;
            height: 428px;
            border: 1px solid #e7eaf4;
            border-radius: 5px;
            overflow: hidden;
            .title {
                font-size: 16px;
                font-weight: bold;
                line-height: 48px;
                background: #f6f9fb;
                padding-left: 30px;
                border-bottom: 1px solid #f2f2f2;
                img {
                    vertical-align: middle;
                    margin-left: 5px;
                }
            }
            ul {
                width: 100%;
                height: 370px;
                overflow-y: auto;
                li {
                    padding: 16px 20px;
                    color: #666;
                    p {
                        font-size: 16px;
                    }
                    .detail {
                        color: #ccc;
                        font-size: 14px;
                        margin-top: 8px;
                        span {
                            float: left;
                        }
                        span + span {
                            margin-left: 3%;
                        }
                    }
                }
                li + li {
                    border-top: 1px solid #e7ebf2;
                }
                li:last-child {
                    border-bottom: 1px solid #e7ebf2;
                }
            }
        }
    }
</style>